<template>
  <div>
    <!-- 头部 -->
    <div div class="book_top">
      <ul class="menu_top_list ">
        <li @click="add()"><span>返回</span></li>
        <li>收藏列表</li>
        <li></li>
      </ul>
      <div class="book_bk_qs1 tabb">
        <ul class="shujia_tab">
          <li class="book_tab_UP">全部</li>
          <div class="delButton" @click="delState">
            <i class="iconfont icon-cuowu"></i>
          </div>
        </ul>
      </div>
    </div>


    <ul class="fengtui_list Linkfont clear">

      <li v-for="(item, index) in bookShelfList" :key="index">

        <div class="del" v-show="del" @click="dels(index)">
          <i class="iconfont icon-cuowu"></i>
        </div>
        <router-link :to="'./BookContent?id=' + item.id">
          <img :src="item.imc">
          <p>{{ item.name }}</p>
        </router-link>


      </li>
    </ul>
  </div>
</template>




<script>
export default {
  data() {
    return {
      active: 0,
      bookShelfList: null,
      del: null
    };
  },

  mounted() { },

  methods: {
    add() {
      this.$router.back();
      localStorage.removeItem("loglevel:webpack-dev-server");
      // console.dir(this);
      // console.log(1);
    },
    //刪除状态
    delState() {
      this.del = !this.del
    },
    //删除
    dels(index) {
      //   console.log(index);
      this.$store.commit("delFun", index)
    }
  },
  created() {
    this.bookShelfList = this.$store.state.bookShelfList

  },

};
</script>


<style lang="scss">
.del {
  width: 30.1%;
  height: 158px;
  position: absolute;
  background-color: rgba(143, 140, 140, 0.253);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;

  i {
    z-index: 10;
    font-size: 30px;
    color: #fff;
  }
}

//删除按钮
.delButton {
  position: absolute;
  text-align: center;
  top: 53px;
  right: 20px;

  i {
    font-size: 40px;
    color: #EF9965;
  }
}

.tabb {
  border-top-width: 0px;
  padding: 9.36px;
  background: #f3f3f3;
  overflow: auto;
}

.Linkfont {
  margin-top: 111.15px;


}
</style>